import React, { Fragment } from 'react'
import { Row, Col, List, Typography } from 'antd'
import { IMeta, IConfig, IData } from '../../../../dnd/component_type'

interface IProps {
  meta: IMeta,
  config: IConfig,
  data: IData,
  children?: any;
}

const data = [
  'XXXXX 1',
  'XXXXX 2',
  'XXXXX 3',
  'XXXXX 4',
];

export default function FooterPreview (props: IProps) {
  return (
    <Fragment>
      <Row gutter={16}>
        <Col span={6} >
          <List
            header={<div>相关资源</div>}
            bordered
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Typography.Text mark>[*]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </Col>
        
        <Col span={6} >
          <List
            header={<div>合作</div>}
            bordered
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Typography.Text mark>[*]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </Col>

        <Col span={6} >
          <List
            header={<div>社区</div>}
            bordered
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Typography.Text mark>[*]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </Col>

        <Col span={6} >
          <List
            header={<div>友情链接</div>}
            bordered
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Typography.Text mark>[*]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24} >
          <div style={{ display: 'flex', justifyContent: 'center', margin: '20px' }}>
            <span>技术支持：xxxx</span>
            <span>备案号：xxxx</span>
          </div>
        </Col>
      </Row>
    </Fragment>
  )
}